<!--
 * @Author: 九璃怀特 1599130621@qq.com
 * @Date: 2023-12-25 09:04:01
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2023-12-26 10:51:26
 * @FilePath: \zxi-surface-guide\src\components\BaseMenu\group.vue
 * @Description: 
 -->
<script setup lang="ts">
import { PmFrameKey, iVideoItem } from "~/BaseFrame";
import { inject, ref } from "vue";

withDefaults(
  defineProps<{
    title: string;
    data: iVideoItem[];
  }>(),
  {
    title: "",
  }
);

const root = inject(PmFrameKey)!;

const fold = ref(false);

function toVideo(item: any) {
  root.video.value = item;
}
</script>

<template>
  <div class="menu-group" :class="{ fold }">
    <div class="group-title" @click="fold = !fold">
      {{ title }} <i class="iconfont icon-shangxiazhankai" />
    </div>
    <div class="group-content">
      <div class="group-wrapper">
        <template v-for="item in data" :key="item.name">
          <div class="item" @click="toVideo(item)">
            <div class="item-wrapper">
              <div class="img-wrapper">
                <img draggable="false" :src="item.imgUrl" />
              </div>
              <div class="name">
                <PmText>
                  {{ item.name }}
                </PmText>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.menu-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  // padding: 0.5rem;
  &.fold {
    .group-title {
      .iconfont {
        transform: rotate(0deg) !important;
      }
    }
    .group-content{
      grid-template-rows: 0fr;
      .group-wrapper{
        padding: 0;
      }
    }
  }
  .group-title {
    width: 100%;
    height: 5rem;
    box-sizing: border-box;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: var(--pm-el-text-color);
    background-color: var(--pm-el-background-color);
    .iconfont {
      font-size: 2.5rem;
      transform: rotate(-90deg);
    }
  }

  .group-content {
    flex: auto;
    border: 0.2rem solid var(--pm-el-background-color);
    background-color: var(--pm-background-color);
    border-top: none;
    box-sizing: border-box;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr;
    transition: all .5s;
    .group-wrapper {
      transition: all .5s;
      padding: 2rem 0.5rem;
      display: grid;
      // grid-template-columns: repeat(auto-fill, 15.5rem);
      grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
      grid-auto-rows: 1fr;
      justify-content: space-between;
      justify-items: center;
      overflow: hidden;
      gap: 2rem;
      position: relative;
      .item {
        width: 15.5rem;
        text-align: center;
        position: relative;
        cursor: pointer;
        .item-wrapper {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          gap: 0.5rem;
          box-sizing: border-box;
          border: 0.2rem solid var(--pm-el-background-color);
          .img-wrapper {
            background-size: cover;
            width: 12rem;
            height: 12rem;
            box-sizing: border-box;
            padding: 0.5rem;
            img {
              width: 100%;
            }
          }
          .name {
            font-size: 1.75rem;
            color: var(--pm-el-text-color);
            background-color: var(--pm-el-background-color);
            display: flex;

            // text-align: center;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 4rem;
            box-sizing: border-box;
            padding: .5rem;
          }
        }
      }
    }
  }
}
</style>
